let html=document.querySelector('#html') ;//获取元素
let style=document.querySelector('#style');
let string=`/*你好，我是WL
*接下来我要演示一下我的前端功底
*首先我要准备一个div
*/
#div1{
  border:1px solid red;
  height:200px;
  width:200px;
  
}
/*接下来我把地址变成一个八卦图
*注意看好了
*首先，把div变成一个圆
*/
#div1{
  border-radius:50%;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
  border:none;
}
/*
八卦是阴阳形成的
一黑一白
*/
#div1{
  background: linear-gradient(90deg,
  rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%);
}

/*
加两个神秘的小球
*/
#div1::before{
  width:100px;
  height:100px;
  top:0;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(0,0,0,1) 20%);
  border-radius:50%
}
#div1::after{
  width:100px;
  height:100px;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  background: radial-gradient(circle, rgba(0,0,0,1) 20%, rgba(255,255,255,1) 20%);
  border-radius:50% 

}

`;

let string2='';//一个空数组用于接收string[n]
let n =0;
let step = ()=>{
  setTimeout(()=>{
    //string[n]是回车则改写
    //如果不是回车就照搬
    if (string[n]==="\n") {
      string2+= "<br>"
    } else if(string[n]===' '){
     string2+= "&nbsp";
    }else{
       string2+=string[n];
    }
    
    
    html.innerHTML=string2;
    style.innerHTML=string.substring(0,n);
    window.scrollTo(0,99999)
    html.scrollTo(0,99999)
    if(n+1<string.length){//n不是数组长度范围内最后一个，则继续step()
       n +=1
       step()
    }  

  },0);  
}
step();




 
 